<template>
  <div class="cart">
    <my-header :leftEit="true">
       <template #left>
         <span style="color:red">
            编辑
         </span>
       </template>
       购物车
    </my-header>
    <div class="count">
       <img src="../../assets/img/dp.png" alt="">
       <h5>猜你喜欢</h5>
       <ul>
         <li v-for="(item,index) in loveList" :key="index">
           <people-cart :objItem="item">
             已售{{item.numberOrders}}
           </people-cart>
         </li>
       </ul>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";
import { getGoods } from "../../api/home/home";
import myHeader from '../../components/myHeader.vue';
import PeopleCart from '../../components/peopleCart.vue';
export default {
  components: { myHeader, PeopleCart },
  setup() {
    const data = reactive({
      loveList: [], // 猜你喜欢的数据
    })
    getGoods().then(res => {
      // console.log(res);
      let num = res.data.length - 4;
      // Math.random(); (0-1) 随机数
      let number = parseInt(Math.random()*num);
      // console.log(number);
      data.loveList = res.data.splice(number,4);
    })

    return{
      ...toRefs(data)
    }
  },
};
</script>
<style lang="scss" scoped>
   .cart{
     height: 100%;
     .count{
       height: calc(100% - 200px);
       overflow-y: auto;
       img{
         width: 100%;
       }
       h5{
         line-height: 90px;
         text-align: center;
         font-size: 32px;
       }
       ul{
         display: flex;
         padding: 0 20px;
         flex-wrap: wrap;
         justify-content: space-between;
         li{
           width: 50%;
         }
       }
     }
   }
</style>